<template>
    <u-overlay :show="!isConnected" @touchmove.stop.prevent="noop" :customStyle="{
			backgroundColor: '#fff',
			display: 'flex',
			justifyContent: 'center',
		}">
        <view class="u-no-network">
            <u-icon :name="image" size="150" imgMode="widthFit" class="u-no-network__error-icon"></u-icon>
            <text class="u-no-network__tips">{{tips}}</text>
            <!-- 只有APP平台，才能跳转设置页，因为需要调用plus环境 -->
            <!-- #ifdef APP-PLUS -->
            <view class="u-no-network__app">
                <text class="u-no-network__app__setting">请检查网络，或前往</text>
                <text class="u-no-network__app__to-setting" @tap="openSettings">设置</text>
            </view>
            <!-- #endif -->
            <view class="u-no-network__retry">
                <u-button size="mini" text="重试" type="primary" plain @click="retry"></u-button>
            </view>
        </view>
    </u-overlay>
</template>

<script>
    import props from './props.js';

    /**
     * noNetwork 无网络提示
     * @description 该组件无需任何配置，引入即可，内部自动处理所有功能和事件。
     * @tutorial https://www.uviewui.com/components/noNetwork.html
     * @property {String}			tips 	没有网络时的提示语 （默认：'哎呀，网络信号丢失' ）
     * @property {String | Number}	zIndex	组件的z-index值 
     * @property {String}			image	无网络的图片提示，可用的src地址或base64图片 
     * @event {Function}			retry	用户点击页面的"重试"按钮时触发
     * @example <u-no-network></u-no-network>
     */
    export default {
        name: "u-no-network",
        mixins: [uni.$u.mpMixin, uni.$u.mixin, props],
        data() {
            return {
                isConnected: true, // 是否有网络连接
                networkType: "none", // 网络类型
            }
        },
        mounted() {
            this.isIOS = (uni.getSystemInfoSync().platform === 'ios')
            uni.onNetworkStatusChange((res) => {
                this.isConnected = res.isConnected
                this.networkType = res.networkType
                this.emitEvent(this.networkType)
            })
            uni.getNetworkType({
                success: (res) => {
                    this.networkType = res.networkType
                    this.emitEvent(this.networkType)
                    if (res.networkType == 'none') {
                        this.isConnected = false
                    } else {
                        this.isConnected = true
                    }
                }
            })
        },
        methods: {
            retry() {
                // 重新检查网络
                uni.getNetworkType({
                    success: (res) => {
                        this.networkType = res.networkType
                        this.emitEvent(this.networkType)
                        if (res.networkType == 'none') {
                            uni.$u.toast('无网络连接')
                            this.isConnected = false
                        } else {
                            uni.$u.toast('网络已连接')
                            this.isConnected = true
                        }
                    }
                })
                this.$emit('retry')
            },
            // 发出事件给父组件
            emitEvent(networkType) {
                this.$emit(networkType === 'none' ? 'disconnected' : 'connected')
            },
            async openSettings() {
                if (this.networkType == "none") {
                    this.openSystemSettings()
                    return
                }
            },
            openAppSettings() {
                this.gotoAppSetting()
            },
            openSystemSettings() {
                // 以下方法来自5+范畴，如需深究，请自行查阅相关文档
                // https://ask.dcloud.net.cn/docs/
                if (this.isIOS) {
                    this.gotoiOSSetting()
                } else {
                    this.gotoAndroidSetting()
                }
            },
            network() {
                var result = null
                var cellularData = plus.ios.newObject("CTCellularData")
                var state = cellularData.plusGetAttribute("restrictedState")
                if (state == 0) {
                    result = null
                } else if (state == 2) {
                    result = 1
                } else if (state == 1) {
                    result = 2
                }
                plus.ios.deleteObject(cellularData)
                return result
            },
            gotoAppSetting() {
                if (this.isIOS) {
                    var UIApplication = plus.ios.import("UIApplication")
                    var application2 = UIApplication.sharedApplication()
                    var NSURL2 = plus.ios.import("NSURL")
                    var setting2 = NSURL2.URLWithString("app-settings:")
                    application2.openURL(setting2)
                    plus.ios.deleteObject(setting2)
                    plus.ios.deleteObject(NSURL2)
                    plus.ios.deleteObject(application2)
                } else {
                    var Intent = plus.android.importClass("android.content.Intent")
                    var Settings = plus.android.importClass("android.provider.Settings")
                    var Uri = plus.android.importClass("android.net.Uri")
                    var mainActivity = plus.android.runtimeMainActivity()
                    var intent = new Intent()
                    intent.setAction(Settings.ACTION_APPLICATION_DETAILS_SETTINGS)
                    var uri = Uri.fromParts("package", mainActivity.getPackageName(), null)
                    intent.setData(uri)
                    mainActivity.startActivity(intent)
                }
            },
            gotoiOSSetting() {
                var UIApplication = plus.ios.import("UIApplication")
                var application2 = UIApplication.sharedApplication()
                var NSURL2 = plus.ios.import("NSURL")
                var setting2 = NSURL2.URLWithString("App-prefs:root=General")
                application2.openURL(setting2)
                plus.ios.deleteObject(setting2)
                plus.ios.deleteObject(NSURL2)
                plus.ios.deleteObject(application2)
            },
            gotoAndroidSetting() {
                var Intent = plus.android.importClass("android.content.Intent")
                var Settings = plus.android.importClass("android.provider.Settings")
                var mainActivity = plus.android.runtimeMainActivity()
                var intent = new Intent(Settings.ACTION_SETTINGS)
                mainActivity.startActivity(intent)
            }
        }
    }
</script>

<style lang="scss" scoped>
    @import "../../libs/css/components.scss";

    .u-no-network {
        @include flex(column);
        justify-content: center;
        align-items: center;
        margin-top: -100px;

        &__tips {
            color: $u-tips-color;
            font-size: 14px;
            margin-top: 15px;
        }

        &__app {
            @include flex(row);
            margin-top: 6px;

            &__setting {
                color: $u-light-color;
                font-size: 13px;
            }

            &__to-setting {
                font-size: 13px;
                color: $u-primary;
                margin-left: 3px;
            }
        }

        &__retry {
            @include flex(row);
            justify-content: center;
            margin-top: 15px;
        }
    }
</style>
